<template>
  <div class="header">
    <div class="flex">
      <a-form layout="inline" class="form">
        <a-form-item label="执行状态">
          <a-select v-model:value="search.status" style="width: 120px;">
            <a-select-option :value="option.value" v-for="option in statusList" :key="option.value">{{ option.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="执行方式">
          <a-select v-model:value="search.surveyType" style="width: 120px;">
            <a-select-option :value="option.value" v-for="option in surveyTypeList" :key="option.value">{{ option.label }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="执行人员">
          <a-select v-model:value="search.executorId" style="width: 120px;" allowClear>
            <a-select-option :value="option.id" v-for="option in userList" :key="option.id">{{ option.username }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="客户">
          <a-select v-model:value="search.customerId" style="width: 120px;" allowClear>
            <a-select-option :value="option.id" v-for="option in customerOption" :key="option.id">{{ option.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="项目ID">
          <a-input v-model:value="search.tid" placeholder="输入项目ID" />
        </a-form-item>
        <a-form-item label="关键字">
          <a-input v-model:value="search.title" placeholder="输入关键字" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getTableData">查询</a-button>
          <a-button @click="onReset" class="btn">重置</a-button>
          <a-button type="success" class="btn" @click="onExport">导出</a-button>
        </a-form-item>
      </a-form>
      <a-button type="primary" @click="onAdd">新增任务</a-button>
    </div>
  </div>
  <TablePage 
    :dataSource="dataSource"
    :columns="columns" 
    :paginationData="paginationData"
    @change="pageChange"
    @showSizeChange="showSizeChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'startTime'">
        {{proxy.$filters.formatDate(record.startTime)}}
      </template>
      <template v-if="column.dataIndex === 'surveyType'">
        {{record.surveyType === 1 ? '定性':'定量'}}
      </template>
      <template v-if="column.dataIndex === 'actions'">
        <a type="link" @click="onDetail(record)">编辑</a>
        <a type="link" class="btn" @click="onSetting(record)">抽样</a>
        <a type="link" class="btn" @click="onComplete(record)">查看完成</a>
        <a type="link" class="btn" @click="onStatus(record)">审核</a>
      </template>
    </template>
  </TablePage>
  <BasicModal @register="register">
    <a-form-item label="成功ID/失败ID">
      <a-radio-group v-model:value="form.status">
        <a-radio :value="1">成功ID</a-radio>
        <a-radio :value="-1">失败ID</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="同项目的其他待审核">
      <a-radio-group v-model:value="form.otherReviewStatus">
        <a-radio :value="1">自动审核</a-radio>
        <a-radio :value="0">不审核</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="">
      <a-textarea :rows="4" v-model:value="form.tranIds" />
    </a-form-item>
    <template #footer>
      <a-button type="primary" @click="onSubmitStatus">审核</a-button>
    </template>
  </BasicModal>
</template>

<script setup>
import { useRouter } from 'vue-router'
import TablePage from "@/components/TablePage/index.vue"
import { usePagination } from "@/useHooks/usePagination"
import {surveyList, customerList, adminList, multiReview} from '@/api/survey';
import { useModal } from "@/components/Modal/useModal";
import { downloadFile } from '@/utils/index'
import BasicModal from '@/components/Modal/BasicModal.vue'
import { reactive, ref, watch, onMounted, computed } from 'vue'
import { message } from 'ant-design-vue';
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const [register, { actionDialog, setProps }] = useModal();
const statusList = ref([
  {label: '全部',value: null},
  { label: '未发布', value: 0 },
  { label: '进行中', value: 1 },
  { label: '已暂停', value: 2 },
  { label: '待发放奖励', value: 3 },
  { label: '已关闭', value: -1 },
  { label: '已删除', value: -2 },
])
const surveyTypeList = ref([
  { label: '全部', value: null },
  { label: '定量', value: 2 },
  {label: '定性', value: 1}
])
const userList = ref([]);
const customerOption = ref([]);
const form = reactive({
  status: undefined,
  otherReviewStatus: undefined,
  tranIds: undefined,
  tid: undefined
})
onMounted(() => {
  customerList({}).then(res => {
    customerOption.value = [{name: '全部', id: null},...res.data.list]
  })
  adminList({}).then(res => {
    userList.value = res.data
  })
  getTableData()
})
const router = useRouter()
const dataSource= ref([])
const columns = computed(() => {
  const arr = [
    {
      title: '项目ID',
      dataIndex: 'tid',
      width: 120
    },
    {
      title: '项目名称',
      dataIndex: 'title',
      width: 200
    },
    {
      title: '客户',
      dataIndex: 'customerName',
      width: 120
    },
    {
      title: '项目类型',
      dataIndex: 'surveyType',
      width: 100
    },
    {
      title: '样本需求量',
      dataIndex: 'requiredCompletes',
      width: 100
    },
    {
      title: '奖励',
      dataIndex: 'successReward',
      width: 100
    },
    {
      title: '点击',
      dataIndex: 'participates',
      width: 100
    },
    {
      title: '完成',
      dataIndex: 'completes',
      width: 100
    },
    {
      title: '失败',
      dataIndex: 'failedCompletes',
      width: 100
    },
    {
      title: '配额满',
      dataIndex: 'quotaFull',
      width: 100
    },
    {
      title: '执行时间',
      dataIndex: 'startTime',
      width: 120
    },
    {
      title: '状态',
      dataIndex: 'statusDes',
      width: 120
    },
    {
      title: '操作',
      dataIndex: 'actions',
      width: 220,
      fixed: 'right'
    }
  ]
  return arr;
})
const search = reactive({
  status: null,
  surveyType: null,
  executorId: null,
  customerId: null,
  tid: undefined,
  title: undefined
})
const onReset = () => {
  search.status = null
  search.surveyType = null
  search.executorId= null
  search.customerId =null
  search.tid=undefined
  search.title =undefined
  getTableData()
}
const { paginationData, pageChange, showSizeChange } = usePagination()
watch(paginationData, () => {
  getTableData()
})
const getTableData = () => {
  const req = { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  }
  surveyList(req).then((res) => {
    paginationData.total = res.data.total
    dataSource.value = res.data.list.map(item => ({
      ...item,
      statusDes: statusList.value.find(i => i.value === item.status).label
    }))
  })
}
const onExport = () => {
  downloadFile('/survey/list/export', { 
    size: paginationData.pageSize,
    page: paginationData.currentPage,
    ...search
  })
}
const onDetail = (record) => {
  router.push(`/task/edit?tid=${record.tid}`)
}
const onAdd = () => {
  router.push(`/task/add`)
}
const onSetting = (record) => {
  router.push(`/task/setting?tid=${record.tid}`)
}
const onStatus = (record) => {
  form.status= undefined
  form.otherReviewStatus= undefined
  form.tranIds= undefined
  form.tid = record.tid
  setProps({ title: `审核${record.title}` })
  actionDialog()
}

const onSubmitStatus = () => {
  if (form.status === undefined || form.otherReviewStatus === undefined || !form.tranIds) {
    message.error('请填写完整的信息')
    return
  }
  multiReview(form).then(() => {
    message.success('提交成功')
    getTableData()
    actionDialog(false)
  })
}

const onComplete = (record) => {
  router.push(`/record/complete?surveyId=${record.tid}`)
}
</script>